<template>
  <div>
    <div class="head">
      <img alt="" src="~/images/head_title.png" />
    </div>
    <div class="content">
      <div class="form_box">
        <div class="nyy_cell">
          <div class="nyy_cell_label">
            <span>*</span>
            <img alt="" class="icon" src="~/images/user_icon.png" />
          </div>
          <div class="nyy_cell_value">
            <div class="body">
              <input
                v-model="form.name"
                class="nyy_input"
                placeholder="请输入姓名"
                type="text"
              />
            </div>
          </div>
        </div>
        <div class="nyy_cell">
          <div class="nyy_cell_label">
            <span>*</span>
            <img alt="" class="icon" src="~/images/card_icon.png" />
          </div>
          <div class="nyy_cell_value">
            <div class="body">
              <input
                v-model="form.cardNo"
                class="nyy_input"
                maxlength="18"
                placeholder="请输入身份证号"
                type="text"
              />
            </div>
          </div>
        </div>
        <div class="nyy_cell">
          <div class="nyy_cell_label">
            <span>*</span>
            <img alt="" class="icon" src="~/images/mobile_icon.png" />
          </div>
          <div class="nyy_cell_value">
            <div class="body">
              <input
                v-model="form.phone"
                class="nyy_input"
                maxlength="11"
                placeholder="请输入手机号"
                type="text"
              />
            </div>
          </div>
        </div>
        <div class="nyy_cell">
          <div class="nyy_cell_label">
            <span>*</span>
            <img alt="" class="icon" src="~/images/lock_icon.png" />
          </div>
          <div class="nyy_cell_value">
            <div class="body">
              <input
                v-model="form.smsCode"
                class="nyy_input"
                placeholder="请输入验证码"
                style="width: calc(100% - 80px)"
                type="text"
              />
              <span v-if="sms_s == 0" class="button" @click="sendSms">
                获取验证码
              </span>
              <span v-else class="button">{{ sms_s }}s</span>
            </div>
          </div>
        </div>
        <div v-if="false" class="nyy_cell no_border">
          <van-radio-group
            v-model="radio_type"
            direction="horizontal"
            @change="changeLog"
          >
            <van-radio
              checked-color="#4295FF"
              icon-size="16px"
              name="1"
              @click="changeRadio('1')"
            >
              <span class="radio_text">车牌认证</span>
            </van-radio>
            <van-radio
              checked-color="#4295FF"
              icon-size="16px"
              name="2"
              @click="changeRadio('2')"
            >
              <span class="radio_text">实名认证</span>
            </van-radio>
            <van-radio
              checked-color="#4295FF"
              icon-size="16px"
              name="3"
              @click="changeRadio('3')"
            >
              <span class="radio_text">人脸识别</span>
            </van-radio>
          </van-radio-group>
        </div>
        <div class="auto_box">
          <div v-if="radio_type == 1" class="car_box">
            <div class="title">请输入车牌号</div>
            <div class="car_content">
              <input
                ref="card_no"
                v-model="form.carNo"
                maxlength="8"
                style="position: absolute; z-index: -1; left: -100%; opacity: 0"
                type="text"
              />
              <ul class="car_ul" @click="focus">
                <li>{{ getCardNo(0) }}</li>
                <li style="margin-right: 10px">{{ getCardNo(1) }}</li>
                <li>{{ getCardNo(2) }}</li>
                <li>{{ getCardNo(3) }}</li>
                <li>{{ getCardNo(4) }}</li>
                <li>{{ getCardNo(5) }}</li>
                <li>{{ getCardNo(6) }}</li>
                <li :class="{ xinnengyuan: getCardNo(7) == '' }">
                  {{ getCardNo(7) }}
                </li>
              </ul>
            </div>
          </div>
          <div v-if="radio_type == 2" class="card_box">
            <div class="title">上传身份证</div>
            <div class="card_content">
              <div class="card_front">
                <img
                  v-if="fileInfo['card_front']"
                  alt=""
                  :src="getObjectURL(fileInfo['card_front'])"
                />
                <input
                  ref="card_front"
                  accept="image/*"
                  class="upload_file"
                  name="card_front"
                  type="file"
                  @change="changeFile('card_front')"
                />
              </div>
              <div class="card_back">
                <img
                  v-if="fileInfo['card_back']"
                  alt=""
                  :src="getObjectURL(fileInfo['card_back'])"
                />
                <input
                  ref="card_back"
                  accept="image/*"
                  class="upload_file"
                  name="card_back"
                  type="file"
                  @change="changeFile('card_back')"
                />
              </div>
            </div>
          </div>
          <div v-if="radio_type == 3" class="car_box">
            <div class="face_content">
              <div class="face_img">
                <img
                  v-if="fileInfo['face']"
                  alt=""
                  :src="getObjectURL(fileInfo['face'])"
                />
                <input
                  ref="face"
                  accept="image/*"
                  class="upload_file"
                  name="face"
                  type="file"
                  @change="changeFile('face')"
                />
              </div>

              <p>点击开始识别</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="register_btn" @click="checkForm">注册</div>
  </div>
</template>
<script>
  import { isPhone, isIdCard } from '@/utils/validate'
  import { Radio, RadioGroup } from 'vant'
  import api from '@/api'
  export default {
    name: 'Index',
    components: {
      [Radio.name]: Radio,
      [RadioGroup.name]: RadioGroup,
    },
    data() {
      return {
        form: {
          name: '',
          cardNo: '',
          phone: '',
          smsCode: '',
          carNo: '',
          facePicUrl: '',
          idcardFrontPicUrl: '',
          idcardReversePicUrl: '',
        },
        fileInfo: {
          face: '',
          card_front: '',
          card_back: '',
        },
        radio_type: '',
        sms_s: 0,
        settimer: null,
        redirect: '', //回调地址
        changeRed: false,
      }
    },
    computed: {
      carNo() {
        return this.form.carNo
      },
    },
    watch: {
      carNo(value) {
        console.log(value)
      },
    },
    mounted() {},
    methods: {
      checkForm() {
        let form = this.form
        if (form.name == '') {
          this.$toast('请填姓名')
          return false
        }
        if (form.cardNo == '') {
          this.$toast('请填写身份证号')
          return false
        }
        if (!isIdCard(form.cardNo)) {
          this.$toast('请填写合法身份证号')
          return false
        }
        if (form.phone == '') {
          this.$toast('请填写手机号')
          return false
        }
        if (!isPhone(form.phone)) {
          this.$toast('请填写合法手机号')
          return false
        }
        if (form.smsCode == '') {
          this.$toast('请填写验证码')
          return false
        }
        if (this.radio_type == 1 && form.carNo == '') {
          this.$toast('请填写车牌号')
          return false
        }
        if (this.radio_type == 1 && form.carNo.length < 7) {
          this.$toast('请规范填写车牌号')
          return false
        }
        if (
          this.radio_type == 2 &&
          (this.fileInfo.card_front == '' || this.fileInfo.card_back == '')
        ) {
          this.$toast('请上传身份证信息')
          return false
        }
        if (this.radio_type == 3 && this.fileInfo.face == '') {
          this.$toast('请上本人照片')
          return false
        }
        this.register()
      },
      async register() {
        if (this.radio_type == 2) {
          let formData = new FormData()
          const config = {
            headers: { 'Content-Type': 'multipart/form-data' },
          }
          formData.append('file', this.fileInfo.card_front)
          await api.user.upload(formData, config).then((res) => {
            this.form.idcardFrontPicUrl = res.url
          })
          formData.append('file', this.fileInfo.card_back)
          await api.user.upload(formData, config).then((res) => {
            this.form.idcardReversePicUrl = res.url
          })
        }
        if (this.radio_type == 3) {
          let formData = new FormData()
          const config = {
            headers: { 'Content-Type': 'multipart/form-data' },
          }
          formData.append('file', this.fileInfo.face)
          await api.user.upload(formData, config).then((res) => {
            this.form.facePicUrl = res.url
          })
        }
        // 获取回调地址
        let redirect = this.$route.query.redirect ?? ''
        api.user.register(this.form).then((res) => {
          const { code, token, expiresIn, secret, qrCode } = res
          if (code == 2005) {
            this.$router.replace({
              path: '/login',
              query: {
                redirect: redirect,
              },
            })
            return
          }
          this.$router.replace({
            path: '/message',
            query: {
              token: token,
              expiresIn: expiresIn,
              secret: secret,
              qrCode: encodeURIComponent(qrCode),
              redirect: redirect,
            },
          })
        })
      },
      sendSms() {
        if (this.sms_s != 0) {
          return
        }
        if (this.form.phone == '') {
          this.$toast('请填写手机号')
          return false
        }
        if (!isPhone(this.form.phone)) {
          this.$toast('请填写合法手机号')
          return false
        }
        api.user.sendSms({ phone: this.form.phone, function: 'register' })
        this.sms_s = 60
        let that = this
        that.settimer = setInterval(function () {
          if (that.sms_s <= 1) {
            that.sms_s = 0
            clearInterval(that.settimer)
            return
          }
          that.sms_s--
        }, 1000)
      },
      changeLog() {
        this.changeRed = true
      },
      changeRadio() {
        if (!this.changeRed) {
          this.radio_type = ''
        }
        this.changeRed = false
      },
      focus() {
        this.$refs.card_no.focus()
      },
      getCardNo(index) {
        return this.carNo.charAt(index) ?? ''
      },
      changeFile(key) {
        console.log(key)
        let inputDOM = this.$refs[key]
        this.$set(this.fileInfo, key, inputDOM.files[0])
      },
      getObjectURL(file) {
        if (!file) return ''
        var url = null
        if (window.createObjectURL != undefined) {
          // basic
          url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
          // mozilla(firefox)
          url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
          // webkit or chrome
          url = window.webkitURL.createObjectURL(file)
        }
        return url
      },
    },
  }
</script>
<style scoped>
  .head {
    width: 100%;
    height: 150px;
    background-image: url('~images/head_back.png');
    background-size: 100% 100%;
    text-align: center;
  }
  .head img {
    width: 130px;
    margin: 53px auto;
  }
  .head .memo {
    height: 21px;
    font-size: 21px;
    font-weight: bold;
    color: #fefefe;
    line-height: 20px;
  }
  .form_box {
    width: calc(100% - 60px);
    padding: 30px;
  }
  .no_border {
    border: none;
    height: 75px;
    line-height: 75px;
    align-items: center;
    justify-content: space-between;
  }
  .auto_box {
    width: 100%;
    /* height: 156px; */
  }
  .auto_box .title {
    font-size: 13px;
    color: #333333;
    margin: 0;
  }
  .car_ul {
    margin-top: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    display: -webkit-box;
    display: -webkit-flex;
    cursor: pointer;
  }
  .car_ul li {
    width: 36px;
    height: 36px;
    list-style-type: none;
    text-align: center;
    line-height: 36px;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-flex: 1;
    border: 1px solid #cccccc;
    margin-right: 3px;
  }
  .car_ul .xinnengyuan {
    background-image: url('~images/xinnengyuan.png');
    background-size: 100% 100%;
  }
  .card_content {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
  }
  .card_content .card_front {
    width: 140px;
    height: 92px;
    position: relative;
    background-image: url('~images/card_front.png');
    background-size: 100% 100%;
  }
  .card_content .card_back {
    width: 140px;
    height: 92px;
    position: relative;
    background-image: url('~images/card_back.png');
    background-size: 100% 100%;
  }
  .card_content img {
    width: 100%;
    height: 100%;
  }
  .face_content {
    width: 100%;
    text-align: center;
  }
  .face_content .face_img {
    margin: auto;
    width: 140px;
    height: 120px;
    position: relative;
    background-image: url('~images/face.png');
    background-size: 100% 100%;
  }
  .face_img img {
    width: 100%;
    height: 100%;
  }
  .face_content p {
    font-size: 13px;
    color: #333333;
    margin-top: 10px;
  }
  .register_btn {
    width: 288px;
    height: 48px;
    line-height: 48px;
    background: linear-gradient(0deg, #4093ff, #4193ff);
    box-shadow: 0px 9px 12px 0px rgba(63, 143, 255, 0.23);
    border-radius: 24px;
    color: #ffffff;
    font-size: 17px;
    text-align: center;
    margin: 0 auto 40px;
  }
  .upload_file {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0;
    opacity: 0;
  }
</style>
